<template>
  <div
    style="
      width: 1500px;
      height: 600px;
      border: 1px solid #ddd;
      position: relative;
    "
  >
    <p>在线表格练习</p>
    <!-- luckysheet容器 -->
    <div
      id="luckysheet"
      style="
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 20px;
      "
    ></div>
  </div>
</template>

<script>
// import LuckyExcel from "luckyexcel";
// import { exportExcel } from "../../utils/export";
export default {
  data() {
    return {
      tableData: [
        {
          name: "这个是sheet1",
          color: "",
          index: 1,
          status: 0,
          order: 1,
          celldata: [
            {
              r: 0, // 行
              c: 0, // 列
              v: "姓名", // 值
            },
            {
              r: 1, // 行
              c: 0, // 列
              v: "张三", // 值
            },
            {
              r: 2, // 行
              c: 0, // 列
              v: "李四", // 值
            },
            {
              r: 3, // 行
              c: 0, // 列
              v: "王五", // 值
            },
            {
              r: 0,
              c: 1,
              v: "年龄",
            },
            {
              r: 1,
              c: 1,
              v: "1",
            },
            {
              r: 2,
              c: 1,
              v: "2",
            },
            {
              r: 3,
              c: 1,
              v: "3",
            },
          ],
          config: {},
        },
        {
          name: "Sheet2",
          color: "",
          index: 1,
          status: 0,
          order: 1,
          celldata: [],
          config: {},
        },
      ],
    };
  },

  mounted() {
    // window.onload = function () {
    //   document.getElementById("luckysheet"); // 这里写
    // };
    // window.luckysheet.create(this.options);

    this.init();
  },

  methods: {
    init() {
      var options = {
        container: "luckysheet", //luckysheet为容器id
        title: "测试Excel", //表 头名
        lang: "zh", //中文
        allowCopy: true, // 是否允许拷贝
        showtoolbar: true, // 是否显⽰⼯具栏
        showinfobar: true, // 是否显⽰顶部信息栏
        showsheetbar: true, // 是否显⽰底部sheet页按钮
        showstatisticBar: true, // 是否显⽰底部计数栏
        sheetBottomConfig: true, // sheet页下⽅的添加⾏按钮和回到顶部按钮配置
        allowEdit: true, // 是否允许前台编辑  设置编辑和只读
        enableAddRow: false, // 允许增加⾏
        enableAddCol: false, // 允许增加列
        userInfo: false, // 右上⾓的⽤户信息展⽰样式
        showRowBar: false, // 是否显⽰⾏号区域
        showColumnBar: false, // 是否显⽰列号区域
        sheetFormulaBar: false, // 是否显⽰公式栏
        enableAddBackTop: false, //返回头部按钮
        rowHeaderWidth: 0, //纵坐标
        columnHeaderHeight: 0, //横坐标
        data: this.tableData,
      };
      luckysheet.create(options);
    },
  },
};
</script>

